<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <div class="login-header">
        <img src="./logo.png" alt="">
      </div>
      <!-- 登录表单区域 -->
      <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" class="login-form">
        <!-- 手机号 -->
        <el-form-item prop="mobile">
          <el-input v-model="loginForm.mobile" prefix-icon="el-icon-mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <el-input v-model="loginForm.code" prefix-icon="el-icon-message" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <!-- 协议 -->
        <el-form-item prop="agree">
          <!-- `checked` 为 true 或 false -->
          <el-checkbox v-model="loginForm.agree">我已阅读并同意用户协议和隐私条款</el-checkbox>
        </el-form-item>
        <!-- 按钮区域 -->
        <el-form-item>
          <el-button :loading="loading" class="login-btn" type="primary" @click="validateLoginForm('loginFormRef')">登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import {
    login
  } from '@/api/user.js'
  export default {
    name: 'Login',
    data() {
      var validateAgree = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请勾选同意用户协议和隐私条款'));
        }
        callback();
      }
      return {
        loading: false,
        loginForm: {
          mobile: '13911111111',
          code: '246810',
          agree: false
        },
        loginFormRules: {
          mobile: [{
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            },
            {
              pattern: /^1[3|5|7|8|9]\d{9}$/,
              message: '请输入正确的手机号格式',
              trigger: 'blur'
            }
          ],
          code: [{
              required: true,
              message: '请输入验证码',
              trigger: 'blur'
            },
            {
              pattern: /^\d{6}$/,
              message: '请输入6位验证码',
              trigger: 'blur'
            }
          ],
          agree: [{
            validator: validateAgree,
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      validateLoginForm(formName) {
        this.$refs[formName].validate(valid => {
          if (!valid) {
            return
          }
          this.login()
        })
      },
      login() {
        this.loading = true
        login(this.loginForm).then(res => {
          sessionStorage.setItem('token', res.data.data.token)
          this.$message({
            type: 'success',
            message: '登录成功'
          })
          this.$router.push('/home')
          this.loading = false
        }).catch(err => {
          this.$message({
            type: 'error',
            message: '登录失败。手机号或验证码错误'
          })
          this.loading = false
        })
      }
    }
  }

</script>
<style lang="less" scoped>
  .login-container {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('./bgi.jpeg');
    background-size: 100% 100%;

    .login-form-wrap {
      background-color: white;
      padding: 20px 50px 0 50px;
      min-width: 300px;

      .login-form {
        margin-top: 10px;

        .login-btn {
          width: 100%;
        }
      }

    }
  }

</style>
